<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="1" >
                    <el-menu-item v-for="item in videoData" :index="item.video.file_id">
                        <template #title>
                            <div class="line-clamp1" @click="onVideo(item.video)">{{item.video.title}}</div>
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="padding: 0px;background-color: #000;">
                <video class="video" controls>
                    <source :src="video.file_url" type="video/mp4">
                    您的浏览器不支持 HTML5 video 标签。
                </video>
            </el-main>
        </el-container>
    </div>
    
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import http from '../../util/request';
import func from '../../util/function';
const id: any = ref(useRouter().currentRoute.value.params.id);
const video_id: any = ref(useRouter().currentRoute.value.params.video_id);
const data = ref<any>({})
const video = ref<any>({id:0,title:'',file_url:''})
const videoData = ref<any>([])

const onGetData = () => {
    http.get('/course/'+id.value).then((response:any)=>{
        response.data.data.content = func.onImgStyle( response.data.data.content)
        data.value = response.data.data
        videoData.value = response.data.videos
        if(video_id.value){
            videoData.value.forEach((e:any) => {
                if(video_id.value == e.video_id){
                    video.value = e.video
                }
            });
        }else{
            video.value = videoData.value[0].video
        }
        
    })
}

const onVideo = (data:any) => {
    video.value = data
}


onMounted(()=>{
    onGetData()
})
</script>

<style scoped lang="scss">
.video {
    width: 100%;
    height: 99vh;
    object-fit: cover;
}
</style>
